<template>
  <div class="details">
    <div class="details-header">
      <arrow-left-outlined :style="{ 'font-weight': 'bold', 'margin-right': '18px' }" @click="router.back()" />
      <span>查看详情</span>
    </div>
    <a-divider />
    <div class="details-content">
      <div class="details-title">
        <span class="title">身份类型</span>
      </div>
      <div class="details-item">
        <div>云海吾乡业主身份</div>
      </div>
      <div class="details-title">
        <span class="title">身份申请信息</span>
        <a-row class="row-info">
          <a-col :span="12">姓名</a-col>
          <a-col :span="12">张张</a-col>
        </a-row>
        <a-row class="row-info">
          <a-col :span="12">性别</a-col>
          <a-col :span="12">男</a-col>
        </a-row>
        <a-row class="row-info">
          <a-col :span="12">职业类型</a-col>
          <a-col :span="12">职业类型</a-col>
        </a-row>
      </div>
      <div class="details-title">
        <span class="title">身份发行凭证模板</span>
      </div>
      <div class="details-title">
        <span class="title">审批流程</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { useRouter } from 'vue-router'
  const router = useRouter()
</script>

<style lang="less" scoped>
  .details {
    background: #fff;
    padding-bottom: 32px;

    .details-header {
      font-size: 18px;
      font-weight: 500;
      color: #000;
      padding: 22px 0 0 26px;
    }

    .details-title {
      margin-bottom: 24px;
      clear: both;

      &::before {
        content: '';
        width: 3px;
        height: 13px;
        display: inline-block;
        background: #13c2c2;
        margin-right: 3px;
      }

      .title {
        font-size: 16px;
        font-weight: 500;
        color: #00474f;

        &::before {
          content: '';
          width: 2px;
          height: 10px;
          display: inline-block;
          background: #13c2c2;
          margin-right: 8px;
        }
      }
    }

    .details-content {
      padding: 12px 48px;
      width: 80%;
      margin: auto;

      .details-item {
        box-sizing: border-box;
        width: 40%;
        display: inline-block;
        margin-bottom: 24px;

        div:nth-child(1) {
          color: #000;
        }

        div {
          margin-bottom: 6px;
        }
      }

      .details-item-row {
        margin-bottom: 24px;
        word-wrap: break-word;

        div:nth-child(1) {
          color: #000;
        }

        div {
          margin-bottom: 6px;
        }
      }
    }

    .row-info {
      padding: 12px 0;
      width: 30%;

      &:not(:nth-last-of-type(1)) {
        border-bottom: 1px solid rgb(0 0 0 / 8%);
      }

      div:nth-child(1) {
        font-weight: 400;
        color: #000;
      }
    }
  }
</style>
